<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>自定义事件内容分发</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--
    实现功能：组件里面调用Vue实例里面的方法。

-->
<div id="app">
  <todo>
    <!--
        slot：绑定插槽的name值，就是你使用哪个插槽。
        v-for：遍历Vue实例中的data数组。
        :item：绑定遍历出来的元素给组件的props属性。
        :index：同上
        v-on:remove：自定义事件。 revomeData(index)：操作Vue实例里面的数据。
        :key：绑定组件中的值给组件中的方法使用。

        this.$emit('remove', index); 关键的方法，绑定Vue实例里面的方法 在组件中使用。
    -->
    <todo-item slot="todo-item"
               v-for="(item, index) in itemsData"
               :item="item"
               :index="index"
               v-on:remove="revomeData(index)"
               :key="index">
    </todo-item>
  </todo>
</div>
</body>
<script>
  Vue.component("todo", {
    /*
    [Vue warn]: Error compiling template:
        Cannot use <slot> as component root element because it may contain multiple nodes.
     插槽标签<slot>不能用作根目录~~！！！
    */
    template: "<div><slot name='todo-item'></slot></div>"
  })

  Vue.component("todo-item", {
    props: ['item', 'index'],
    template: "<li><button @click='remove'>删除</button> {{index}}  ===>  {{item}}</li>",
    methods: {
      // 这个怎么绑定？？？    v-on:click='remove'！脑子不好记不住 ~ 日他大爷！
      remove: function (index) { // 自定义方法中 调用Vue实例方法里面的参数
        alert(index)
        // 需要两个参数：自定义方法名 | 方法中传递的参数
        this.$emit('remove', index);
      }
    }
  })

  var vm = new Vue({
    el: "#app",
    data: {
      itemsData: ['Java', 'Linux', 'Web', 'Spring']
    },
    methods: {
      revomeData: function (index) {
        console.log("删除了" + this.itemsData[index] + "     OK~!")
        this.itemsData.splice(index, 1);
      }
    }
  })
</script>
</html>